背景

近期笔者在使用Taro进行微信小程序开发，当引入Echarts图表库时，微信检测单包超限2M的一系列优化措施的踩坑记录，期望能指导读者少走一些弯路。

为什么选择Echarts？

因为已有项目使用了ec-echarts, ec-canvas使用了echarts.js, 所以暂时只能沿用, 由于echarts比较大, 建议新开发的简单功能可以使用别的画图组件,

单包超过2M，为什么？

不处理的情况下, 导致Taro认为echarts.js被多个模块所依赖，echarts.js会被打进common.js文件里, 被所有文件引用, echarts大约占用700k, 如果原有逻辑很多, 加上这700k就会超过单包2M限制, 导致上传报错

解决思路

拆分echarts到分包中

压缩其他的功能体积, 比如图片使用cdn等等

如何拆分echarts到分包

为了解决此问题，采用splitChunks打包配置，将echarts单独模块打包，然后在对应的依赖页面(addChunkPages)注入依赖，config/index.js的配置如下：

const DeviceEchartsChunkName = 'pages/device/echarts';

// 省略含多代码***

// 配置

{

mini: {

compile: {

exclude: [

// 跳过编译

path.resolve(__dirname, '..', 'src/pages/device/components/EcCanvas/echarts.j